<template>
    <ul>
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @toggle="toggleTodo"
        @delete="deleteTodo"
      />
    </ul>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from 'vue';
  import TodoItem from './TodoItem.vue';
  
  const props = defineProps({
    todos: {
      type: Array,
      required: true
    }
  });
  
  const emits = defineEmits(['toggle', 'delete']);
  
  const toggleTodo = (id) => {
    emits('toggle', id);
  };
  
  const deleteTodo = (id) => {
    emits('delete', id);
  };
  </script>
  
  <style scoped>
  ul {
    list-style-type: none;
    padding: 0;
  }
  </style>    